<script setup>
import request, {SERVER_BASE_URL} from "@/utils/request.js";
import { ref, onMounted, nextTick } from 'vue';
import { ElMessage, ElLoading, ElImageViewer } from 'element-plus';
import { useUserStore } from '@/stores/user';
import {Star, StarFilled, ChatDotRound, Loading, Plus, Top} from '@element-plus/icons-vue';

const userStore = useUserStore();
const currentUser = ref(userStore.getUserInfo || JSON.parse(localStorage.getItem('user') || '{}'));
const articles = ref([]);
const loading = ref(false);
const finished = ref(false);
const pageNum = ref(1);
const pageSize = ref(10);
const commentInputMap = ref({});
const showRepliesMap = ref({});
const commentInputRefs = ref({});

// 图片预览相关
const showViewer = ref(false);
const previewUrls = ref([]);
const previewIndex = ref(0);

// 发布文章相关
const showPublishDialog = ref(false);
const publishForm = ref({
  content: '',
  userId: null,
  status: 'PUBLISHED'
});
const uploadFiles = ref([]);
const mediaTypes = ref([]);
const polishing = ref(false);

const articleMainRef = ref(null);

// 预览图片
const previewImage = (mediaList, index) => {
  previewUrls.value = mediaList
    .filter(media => media.mediaType === 'IMAGE')
    .slice(0, 9)  // 最多预览9张图片
    .map(media => media.mediaUrl);
  previewIndex.value = index < previewUrls.value.length ? index : 0;
  showViewer.value = true;
};

// 关闭图片预览
const closePreview = () => {
  showViewer.value = false;
};

// 无限滚动加载
const loadMore = async () => {
  if (loading.value || finished.value) return;
  
  loading.value = true;
  
  try {
    const { data } = await request.get('/article/list', {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        status: 'PUBLISHED'
      }
    });

    console.log('加载文章成功', data)

    if (data.list && data.list.length > 0) {
      // 获取新文章的ID列表
      const articleIds = data.list.map(article => article.id);
      
      // 如果用户已登录，批量检查点赞状态
      if (currentUser.value.id) {
        const likedRes = await request.post('/article-like/batch-check', articleIds, {
          params: { userId: currentUser.value.id }
        });
        
        // 设置点赞状态
        data.list.forEach(article => {
          article.isLiked = likedRes.data.includes(article.id);
        });
      }
      
      // 批量获取文章评论树，而不是一个个请求
      try {
        const articleIdsParam = articleIds.join(',');
        const batchCommentsRes = await request.get(`/article-comment/batch-tree`, {
          params: { ids: articleIdsParam }
        });
        
        // 将评论树分配给对应的文章
        if (batchCommentsRes.code === 200) {
          data.list.forEach(article => {
            article.comments = batchCommentsRes.data[article.id] || [];
          });
        }
      } catch (error) {
        console.error('批量获取评论失败', error);
        // 设置默认空评论
        data.list.forEach(article => {
          article.comments = [];
        });
      }
      
      articles.value.push(...data.list);
      pageNum.value++;
      
      // 判断是否已加载完全部数据
      if (data.list.length < pageSize.value) {
        finished.value = true;
      }
    } else {
      finished.value = true;
    }
  } catch (error) {
    ElMessage.error('加载文章失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 点赞或取消点赞
const toggleLike = async (article) => {
  if (!currentUser.value.id) {
    ElMessage.warning('请先登录');
    return;
  }
  
  try {
    let response;
    if (article.isLiked) {
      // 取消点赞
      response = await request.delete(`/article-like/${article.id}`, {
        params: { userId: currentUser.value.id }
      });
    } else {
      // 点赞
      response = await request.post(`/article-like/${article.id}`, null, {
        params: { userId: currentUser.value.id }
      });
    }
    
    if (response.code === 200) {
      article.isLiked = !article.isLiked;
      article.likes = response.data.likeCount;
    }
  } catch (error) {
    ElMessage.error('操作失败');
    console.error(error);
  }
};

// 点击评论按钮
const focusCommentInput = (articleId) => {
  nextTick(() => {
    const inputRef = commentInputRefs.value[`${articleId}-0`];
    if (inputRef) {
      inputRef.focus();
    }
  });
};

// 提交评论
const submitComment = async (articleId, parentId = null) => {
  if (!currentUser.value.id) {
    ElMessage.warning('请先登录');
    return;
  }
  
  const commentContent = commentInputMap.value[`${articleId}-${parentId || 0}`];
  if (!commentContent || commentContent.trim() === '') {
    ElMessage.warning('评论内容不能为空');
    return;
  }
  
  try {
    const comment = {
      articleId,
      userId: currentUser.value.id,
      content: commentContent,
      parentId: parentId || null
    };
    
    const response = await request.post('/article-comment/add', comment);
    
    if (response.code === 200) {
      // 清空评论输入框
      commentInputMap.value[`${articleId}-${parentId || 0}`] = '';
      
      // 重新加载评论树
      try {
        const commentsRes = await request.get(`/article-comment/tree/${articleId}`);
        const article = articles.value.find(a => a.id === articleId);
        if (article) {
          article.comments = commentsRes.data || [];
          // 更新评论计数
          article.commentCount = (article.commentCount || 0) + 1;
        }
        
        // 如果是回复评论，则自动展开回复列表
        if (parentId) {
          showRepliesMap.value[parentId] = true;
        }
        
        ElMessage.success('评论成功');
      } catch (error) {
        console.error('获取评论失败', error);
      }
    }
  } catch (error) {
    ElMessage.error('评论失败');
    console.error(error);
  }
};

// 切换回复显示状态
const toggleReplies = (commentId) => {
  showRepliesMap.value[commentId] = !showRepliesMap.value[commentId];
};

// 切换回复输入框
const toggleReplyInput = (articleId, commentId, user) => {
  const inputKey = `${articleId}-${commentId}`;
  
  // 如果输入框已经存在（显示状态），则清空并隐藏
  if (commentInputMap.value[inputKey]) {
    commentInputMap.value[inputKey] = '';
  } else {
    // 显示输入框并设置默认回复文本
    commentInputMap.value[inputKey] = `回复 @${user?.nickname || user?.username}：`;
  }
};

// 打开发布文章对话框
const openPublishDialog = () => {
  if (!currentUser.value.id) {
    ElMessage.warning('请先登录');
    return;
  }
  
  // 初始化表单
  publishForm.value = {
    content: '',
    userId: currentUser.value.id,
    status: 'PUBLISHED'
  };
  uploadFiles.value = [];
  mediaTypes.value = [];
  
  showPublishDialog.value = true;
};

// 处理文件上传前的验证
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isVideo = file.type.startsWith('video/');
  const isLt10M = file.size / 1024 / 1024 < 10;

  if (!isImage && !isVideo) {
    ElMessage.error('只能上传图片或视频文件!');
    return false;
  }
  
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过10MB!');
    return false;
  }
  
  // 检查媒体文件数量限制
  if (uploadFiles.value.length >= 9) {
    ElMessage.warning('最多只能上传9个媒体文件!');
    return false;
  }
  
  // 记录媒体类型
  const mediaType = isImage ? 'IMAGE' : 'VIDEO';
  mediaTypes.value.push(mediaType);
  
  return true; // 允许上传
};

// 处理文件变化
const handleFileChange = (file, fileList) => {
  uploadFiles.value = fileList;
  // 确保mediaTypes数组长度与fileList一致
  while (mediaTypes.value.length < fileList.length) {
    const file = fileList[mediaTypes.value.length];
    const isImage = file.raw.type.startsWith('image/');
    mediaTypes.value.push(isImage ? 'IMAGE' : 'VIDEO');
  }
};

// 移除上传文件
const removeUpload = (file, fileList) => {
  const index = uploadFiles.value.findIndex(item => item.uid === file.uid);
  if (index !== -1) {
    uploadFiles.value.splice(index, 1);
    mediaTypes.value.splice(index, 1);
  }
};

// 发布文章
const publishArticle = async () => {
  if (!publishForm.value.content.trim()) {
    ElMessage.warning('文章内容不能为空');
    return;
  }
  
  // 检查媒体文件数量
  if (uploadFiles.value.length > 9) {
    ElMessage.warning('最多只能上传9个媒体文件!');
    return;
  }
  
  try {
    const formData = new FormData();
    formData.append('article', new Blob([JSON.stringify(publishForm.value)], {
      type: 'application/json'
    }));
    
    // 添加媒体文件 (最多9个)
    uploadFiles.value.forEach((file, index) => {
      // 获取原始文件对象
      const rawFile = file.raw;
      if (rawFile) {
        // 使用相同的参数名，让Spring能正确识别为List<MultipartFile>
        formData.append('mediaFiles', rawFile);
        formData.append('mediaTypes', mediaTypes.value[index]);
      }
    });

    console.log('发布数据:', formData.getAll('mediaFiles'));
    console.log('媒体类型:', formData.getAll('mediaTypes'));

    const response = await request.post('/article/publish', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    
    if (response.code === 200) {
      ElMessage.success('发布成功');
      showPublishDialog.value = false;
      
      // 清空表单和文件列表
      publishForm.value = {
        content: '',
        userId: currentUser.value.id,
        status: 'PUBLISHED'
      };
      uploadFiles.value = [];
      mediaTypes.value = [];
      
      // 重新加载文章列表
      articles.value = [];
      pageNum.value = 1;
      finished.value = false;
      loadMore();
    }
  } catch (error) {
    ElMessage.error('发布失败');
    console.error(error);
  }
};

// 返回顶部
const scrollToTop = () => {
  if (articleMainRef.value) {
    articleMainRef.value.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
};

// 处理图片URL
const getImgUrl = (url) => {
  if (!url) return '';

  // 确保有服务器地址前缀
  const serverBaseUrl = SERVER_BASE_URL;
  let fullUrl = url;

  if (url.startsWith('/uploads/')) {
    fullUrl = serverBaseUrl + url;
  }else if(url.startsWith('uploads/')){
    fullUrl = serverBaseUrl + '/' + url;
  }

  // console.log('图片URL:', fullUrl)
  return fullUrl;
};

// 初始化页面
onMounted(() => {
  // 添加滚动事件监听
  const handleScroll = () => {
    const scrollHeight = document.documentElement.scrollHeight;
    const scrollTop = document.documentElement.scrollTop;
    const clientHeight = document.documentElement.clientHeight;
    
    // 当滚动到距离底部100px时，触发加载更多
    if (scrollHeight - scrollTop - clientHeight < 100 && !loading.value && !finished.value) {
      loadMore();
    }
  };
  
  window.addEventListener('scroll', handleScroll);
  
  // 初始加载
  loadMore();
  
  // 组件卸载时移除事件监听
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
});

const polishArticle = async () => {
  const userContent = publishForm.value.content.trim();
  const systemPrompt = "你是一名专业的新媒体写作编辑，请根据下方内容进行润色，使其表达更流畅、书面化、逻辑清晰、语句优美。如果内容为空，请随机生成一段积极向上、适合校园社区分享的短文，尽量使用通俗的表达方式，字数在10-50字之间。只需要文章内容，不需要其他内容";
  polishing.value = true;
  try {
    const response = await fetch("https://openrouter.ai/api/v1/chat/completions", {
      method: "POST",
      headers: {
        "Authorization": "Bearer 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",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        "model": "deepseek/deepseek-chat-v3-0324:free",
        "messages": [
          {
            "role": "system",
            "content": systemPrompt
          },
          {
            "role": "user",
            "content": userContent || "（内容为空）"
          }
        ]
      })
    });
    const data = await response.json();
    if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {
      publishForm.value.content = data.choices[0].message.content.trim();
      ElMessage.success('AI润色完成！');
    } else {
      ElMessage.error('AI润色失败，请重试');
    }
  } catch (e) {
    ElMessage.error('AI润色出错');
  } finally {
    polishing.value = false;
  }
};
</script>

<template>
<el-main class="article-main" ref="articleMainRef">
  <div class="article-container">
    <!-- 文章列表 -->
    <div v-if="articles.length > 0" class="article-list">
      <el-card v-for="article in articles" :key="article.id" class="article-item">
        <!-- 文章头部：用户信息 -->
        <div class="article-header">
          <el-avatar :size="40" :src="getImgUrl(article.author.avatar) || ''">
            {{ article.author?.nickname?.charAt(0) || article.author?.username?.charAt(0) || 'U' }}
          </el-avatar>
          <div class="user-info">
            <div class="username">{{ article.author?.nickname || article.author?.username }}</div>
            <div class="publish-time">{{ new Date(article.createTime).toLocaleString() }}</div>
          </div>
        </div>
        
        <!-- 文章内容 -->
        <div class="article-content">{{ article.content }}</div>
        
        <!-- 文章媒体 -->
        <div v-if="article.mediaList && article.mediaList.length > 0" class="article-media">
          <div class="media-grid" :class="{ 
            'media-grid-1': article.mediaList.length === 1,
            'media-grid-2-3': article.mediaList.length >= 2 && article.mediaList.length <= 3,
            'media-grid-4': article.mediaList.length === 4,
            'media-grid-more': article.mediaList.length > 4
          }">
            <div v-for="(media, index) in article.mediaList.slice(0, 9)" :key="media.id" class="media-item">
              <img v-if="media.mediaType === 'IMAGE'" 
                   :src="getImgUrl(media.mediaUrl)"
                   alt="媒体内容" 
                   @click="previewImage(article.mediaList, index)" />
              <video v-else-if="media.mediaType === 'VIDEO'" controls>
                <source :src="getImgUrl(media.mediaUrl)" type="video/mp4">
                您的浏览器不支持视频播放
              </video>
            </div>
          </div>
          <!-- 添加媒体文件数量提示 -->
          <div v-if="article.mediaList.length > 9" class="media-more-tip">
            还有{{ article.mediaList.length - 9 }}个媒体文件未显示
          </div>
        </div>
        
        <!-- 文章底部：浏览量、点赞、评论 -->
        <div class="article-footer">
          <div class="article-stats">
<!--            <span class="views">浏览 {{ article.views }}</span>-->
            <span class="comments">评论 {{ article.commentCount || 0 }}</span>
          </div>
          <div class="article-actions">
            <el-button :class="{ 'is-liked': article.isLiked }" type="primary" text @click="toggleLike(article)">
              <el-icon style="margin-right: 5px;font-size: 20px"><star-filled v-if="article.isLiked" /><star v-else /></el-icon>
              {{ article.likes || 0 }}
            </el-button>
            <el-button type="primary" text @click="focusCommentInput(article.id)">
              <el-icon style="margin-right: 5px;font-size: 20px"><chat-dot-round /></el-icon> 评论
            </el-button>
          </div>
        </div>
        
        <!-- 评论区 -->
        <div class="comment-section">
          <!-- 评论输入框 -->
          <div class="comment-input">
            <el-input 
              v-model="commentInputMap[`${article.id}-0`]" 
              placeholder="写评论..." 
              type="textarea" 
              :rows="1"
              :ref="el => { commentInputRefs[`${article.id}-0`] = el }"
            />
            <el-button style="margin-left: 5px" type="primary" size="small" @click="submitComment(article.id)">发送</el-button>
          </div>
          
          <!-- 评论列表 -->
          <div v-if="article.comments && article.comments.length > 0" class="comment-list">
            <div v-for="comment in article.comments" :key="comment.id" class="comment-item">
              <!-- 评论人信息 -->
              <div class="comment-header">
                <el-avatar :size="30" :src="getImgUrl(comment.user.avatar) || ''">
                  {{ comment.user?.nickname?.charAt(0) || comment.user?.username?.charAt(0) || 'U' }}
                </el-avatar>
                <div class="comment-user-info">
                  <span class="comment-username">{{ comment.user?.nickname || comment.user?.username }}</span>
                  <span class="comment-time">{{ new Date(comment.createTime).toLocaleString() }}</span>
                </div>
              </div>
              
              <!-- 评论内容 -->
              <div class="comment-content">{{ comment.content }}</div>
              
              <!-- 回复操作 -->
              <div class="comment-actions">
                <el-button type="primary" text @click="toggleReplies(comment.id)">
                  {{ showRepliesMap[comment.id] ? '收起回复' : `查看回复(${comment.replies?.length || 0})` }}
                </el-button>
                <el-button type="primary" text @click="toggleReplyInput(article.id, comment.id, comment.user)">回复</el-button>
              </div>
              
              <!-- 回复列表 -->
              <div v-if="showRepliesMap[comment.id] && comment.replies && comment.replies.length > 0 && showReplies" class="reply-list">
                <div v-for="reply in comment.replies" :key="reply.id" class="reply-item">
                  <!-- 回复人信息 -->
                  <div class="reply-header">
                    <el-avatar :size="24" :src="getImgUrl(reply.user.avatar) || ''">
                      {{ reply.user?.nickname?.charAt(0) || reply.user?.username?.charAt(0) || 'U' }}
                    </el-avatar>
                    <div class="reply-user-info">
                      <span class="reply-username">{{ reply.user?.nickname || reply.user?.username }}</span>
                      <span class="reply-time">{{ new Date(reply.createTime).toLocaleString() }}</span>
                    </div>
                  </div>
                  
                  <!-- 回复内容 -->
                  <div class="reply-content">{{ reply.content }}</div>
                </div>
              </div>
              
              <!-- 回复输入框 -->
              <div v-if="commentInputMap[`${article.id}-${comment.id}`]" class="reply-input">
                <el-input 
                  v-model="commentInputMap[`${article.id}-${comment.id}`]" 
                  placeholder="写回复..." 
                  type="textarea" 
                  :rows="1"
                />
                <el-button style="margin-left: 5px" type="primary" size="small" @click="submitComment(article.id, comment.id)">发送</el-button>
              </div>
            </div>
          </div>
          <div v-else class="no-comments">暂无评论，快来抢沙发吧~</div>
        </div>

      </el-card>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-more">
      <el-icon class="is-loading"><Loading /></el-icon>
      <span>加载中...</span>
    </div>
    
    <!-- 加载更多按钮 -->
    <div v-if="!loading && !finished && articles.length > 0" class="load-more-btn">
      <el-button type="primary" plain @click="loadMore">加载更多</el-button>
    </div>
    
    <!-- 没有更多数据 -->
    <div v-if="finished && articles.length > 0" class="no-more">
      - 没有更多内容了 -
    </div>
    
    <!-- 空状态 -->
    <div v-if="!loading && articles.length === 0" class="empty-state">
      暂无文章，敬请期待~
    </div>
  </div>
  
  <!-- 图片预览组件 -->
  <el-image-viewer
    v-if="showViewer"
    :url-list="previewUrls.map(url => getImgUrl(url))"
    :initial-index="previewIndex"
    @close="closePreview"
  />
  
  <!-- 悬浮发布按钮 -->
  <div class="float-publish-btn" @click="openPublishDialog">
    <el-icon><plus /></el-icon>
  </div>
  
  <!-- 发布文章对话框 -->
  <el-dialog
    v-model="showPublishDialog"
    title="发布文章"
    width="500px"
    destroy-on-close
  >
    <el-form :model="publishForm" label-width="80px">
      <el-form-item label="文章内容">
        <el-input
          v-model="publishForm.content"
          type="textarea"
          :rows="4"
          placeholder="分享新鲜事..."
        ></el-input>
        <el-button
          type="success"
          size="small"
          style="margin-top: 8px"
          @click="polishArticle"
          :loading="polishing"
        >
          AI一键润色文章
        </el-button>
      </el-form-item>
      
      <el-form-item label="上传媒体">
        <el-upload
          action=""
          :auto-upload="false"
          :file-list="uploadFiles"
          :on-remove="removeUpload"
          :before-upload="beforeUpload"
          :on-change="handleFileChange"
          multiple
          list-type="picture-card"
          :limit="9"
          :on-exceed="() => ElMessage.warning('最多只能上传9个媒体文件!')"
        >
          <el-icon><plus /></el-icon>
          <template #tip>
            <div class="upload-tip">最多上传9个媒体文件，支持图片和视频，单个文件不超过10MB</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showPublishDialog = false">取消</el-button>
        <el-button type="primary" @click="publishArticle">发布</el-button>
      </span>
    </template>
  </el-dialog>

</el-main>


<!-- 返回顶部按钮 -->
<el-backtop :right="40" :bottom="40" :visibility-height="200" target=".article-main">
  <div class="back-top-box">
    <el-icon><Top /></el-icon>
  </div>
</el-backtop>


</template>

<style scoped>
.article-main {
  min-height: 100%;
  padding-top: 20px;
}

.article-container {
  max-width: 700px;
  margin: 0 auto;
}

.article-item {
  margin-bottom: 15px;
  border-radius: 8px;
}

.article-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  margin-left: 10px;
}

.username {
  font-weight: bold;
  color: #333;
}

.publish-time {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
}

.article-content {
  margin-bottom: 15px;
  line-height: 1.6;
  word-break: break-word;
  font-size: 18px;
}

.article-media {
  margin-bottom: 15px;
}

.media-grid {
  display: grid;
  grid-gap: 5px;
}

.media-grid-1 {
  grid-template-columns: 1fr;
}

.media-grid-2-3 {
  grid-template-columns: repeat(3, 1fr);
}

.media-grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

.media-grid-more {
  grid-template-columns: repeat(3, 1fr);
}

.media-item {
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
  height: 0;
}

.media-item img, .media-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.article-stats {
  font-size: 13px;
  color: #999;
}

.views, .comments {
  margin-right: 15px;
}

.article-actions {
  display: flex;
}

.el-button.is-liked {
  color: #e74c3c;
}

.comment-section {
  margin-top: 15px;
}

.comment-input {
  display: flex;
  margin-bottom: 15px;
}

.comment-input .el-input {
  margin-right: 10px;
}

.comment-list {
  margin-top: 10px;
}

.comment-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.comment-user-info {
  margin-left: 8px;
}

.comment-username {
  font-weight: bold;
  font-size: 14px;
}

.comment-time, .reply-time {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.comment-content {
  margin-bottom: 8px;
  font-size: 16px;
  word-break: break-word;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
}

.reply-list {
  margin: 10px 0 10px 10px;
}

.reply-item {
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 5px;
}

.reply-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.reply-user-info {
  margin-left: 5px;
}

.reply-username {
  font-weight: bold;
  font-size: 13px;
}

.reply-content {
  font-size: 15px;
  word-break: break-word;
}

.reply-input {
  margin: 10px 0;
  display: flex;
}

.reply-input .el-input {
  margin-right: 10px;
}

.loading-more, .no-more, .empty-state, .load-more-btn {
  text-align: center;
  color: #999;
  padding: 20px 0;
}

.load-more-btn {
  margin: 10px 0 20px;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 10px 0;
  font-size: 14px;
}

/* 添加评论输入框相关样式 */
.el-input.is-focus {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 图片预览相关样式 */
:deep(.el-image-viewer__close) {
  color: #fff;
}

/* 悬浮发布按钮 */
.float-publish-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #409EFF;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 999;
  transition: all 0.3s;
}

.float-publish-btn .el-icon {
  font-size: 24px;
}

.float-publish-btn:hover {
  background-color: #66b1ff;
  transform: scale(1.1);
}

/* 上传提示 */
.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 返回顶部按钮样式 */
.back-top-box {
  background-color: #409EFF;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.back-top-box:hover {
  background-color: #66b1ff;
  transform: scale(1.1);
}

.media-more-tip {
  text-align: center;
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}
</style>